Credit Card Activity

The CreditCardActivity collects credit card information from the user, such as cardholder name, card number, expiration date, and CVV.

Inputs

The CreditCardActivity expects the following properties:

• Title (string): A heading to indicate the purpose of the card entry (e.g., "Enter Payment Details").
• Description (string): Additional instructions to guide the user (e.g., "Please provide your card details for payment processing.").
• ButtonCancelText (string): Text displayed on the cancel button (e.g., "Cancel").
• ButtonOKText (string): Text displayed on the confirmation button (e.g., "Submit").

Example Input

{
  "title": "Enter Payment Details",
  "description": "Please provide your card details for payment processing.",
  "buttonCancelText": "Cancel",
  "buttonOKText": "Submit"
}

Example Code

creditCardActivity: async (data: CreditCardActivityOptions) => {
  console.log("CreditCardActivity from agent:", data);
  return new Promise<{ action: WorkflowActivityUserAction; result: any }>((resolve) => {
    RootNavigation.navigate("WorkflowActivityScreen", {
      type: "creditCard",
      data,
      onReject: () => {
        console.log("CreditCardActivity result:", "Rejected");
        resolve({
          action: WorkflowActivityUserAction.Cancel,
          result: "",
        });
      },
      onConfirm: (result: any) => {
        console.log("CreditCardActivity result:", result);
        resolve({
          action: WorkflowActivityUserAction.OK,
          result,
        });
      },
    });
  });
};

Handling and Layout

When the user navigates to the WorkflowActivityScreen for a Credit Card Activity, the layout includes:

1. Title: A heading that indicates the purpose of the card input (e.g., "Enter Payment Details").

2. Description: Offers additional instructions to guide the user’s input.

3. Credit Card Information Input:

   • Cardholder Name: A text input for the name displayed on the card.
   • Card Number: An input that expects a numeric value up to 16 digits.
   • Expiry Date: An input for the card’s expiration date in MM/YY format.
   • CVV: A 3-digit input for the card’s security code.

4. Action Buttons:

   • Cancel Button: Allows the user to cancel their input, returning a Cancel action.
   • Confirm Button: Submits the user’s input, returning an OK action with the entered details.

Output

The output for a Credit Card Activity depends on the user's interaction:

• If the user confirms, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.OK,
  result: {
    name: "John Doe",
    number: "1234-5678-9101-1121",
    expDate: "10/25",
    cvv: "123"
  }
}

• If the user cancels, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.Cancel,
  result: ""
}